<script setup lang="ts">
import { ref } from 'vue';

// 定义挑战类型
interface Challenge {
  id: number;
  title: string;
  category: string;
  difficulty: 'easy' | 'medium' | 'hard';
  points: number;
  description: string;
  hint: string;
  solved: boolean;
  progress?: number;
}

// 挑战数据
const challenges = ref<Challenge[]>([
  {
    id: 1,
    title: '简单XSS',
    category: 'web',
    difficulty: 'easy',
    points: 50,
    description: '这个网站存在一个简单的XSS漏洞，尝试在页面上执行JavaScript代码。',
    hint: '尝试在输入框中输入HTML标签。',
    solved: false
  },
  {
    id: 2,
    title: '基础SQL注入',
    category: 'web',
    difficulty: 'easy',
    points: 100,
    description: '登录表单可能存在SQL注入漏洞，尝试绕过身份验证。',
    hint: '使用单引号测试注入点。',
    solved: true
  },
  {
    id: 3,
    title: 'JavaScript混淆',
    category: 'reverse',
    difficulty: 'medium',
    points: 200,
    description: '这段JavaScript代码被混淆了，尝试解密并找到隐藏的信息。',
    hint: '查看浏览器的开发者工具。',
    solved: false
  },
  {
    id: 4,
    title: '密码哈希破解',
    category: 'crypto',
    difficulty: 'medium',
    points: 150,
    description: '我们找到了一个MD5哈希值，尝试找出原始密码。\n哈希值: 5f4dcc3b5aa765d61d8327deb882cf99',
    hint: '这是一个常见的密码。',
    solved: false
  },
  {
    id: 5,
    title: '隐藏信息',
    category: 'forensics',
    difficulty: 'easy',
    points: 80,
    description: '这张图片中隐藏了一些信息，尝试找到它。',
    hint: '查看图片的属性或元数据。',
    solved: false
  },
  {
    id: 6,
    title: '环境变量泄露',
    category: 'web',
    difficulty: 'medium',
    points: 180,
    description: '网站可能泄露了敏感的环境变量，尝试找到它们。',
    hint: '检查JavaScript文件或错误页面。',
    solved: false
  }
]);

// 当前选中的挑战分类
const activeCategory = ref('all');

// 当前选中的挑战
const selectedChallenge = ref<Challenge | null>(null);

// Flag提交表单
const flagInput = ref('');
const submitMessage = ref('');

// 过滤挑战
const filteredChallenges = computed(() => {
  if (activeCategory.value === 'all') {
    return challenges.value;
  }
  return challenges.value.filter(challenge => challenge.category === activeCategory.value);
});

// 查看挑战详情
const viewChallenge = (challenge: Challenge) => {
  selectedChallenge.value = { ...challenge };
  flagInput.value = '';
  submitMessage.value = '';
};

// 关闭挑战详情
const closeChallenge = () => {
  selectedChallenge.value = null;
};

// 提交Flag
const submitFlag = () => {
  if (!selectedChallenge.value) return;
  
  // 模拟Flag验证（实际应用中应该发送到服务器）
  const correctFlag = `flag{challenge_${selectedChallenge.value.id}_solved}`;
  
  if (flagInput.value === correctFlag) {
    submitMessage.value = '恭喜！Flag正确！';
    // 更新挑战状态
    const index = challenges.value.findIndex(c => c.id === selectedChallenge.value!.id);
    if (index !== -1) {
      if (challenges.value && challenges.value[index]) {
        challenges.value[index].solved = true;
      }
    }
  } else {
    submitMessage.value = 'Flag错误，请重试。';
  }
};

// 计算每个类别的已解决数量
const categoryStats = computed(() => {
  const stats: Record<string, { total: number; solved: number }> = {
    all: { total: challenges.value.length, solved: challenges.value.filter(c => c.solved).length }
  };
  
  challenges.value.forEach(challenge => {
      const category = challenge.category;
      if (!stats[category]) {
        stats[category] = { total: 0, solved: 0 };
      }
      stats[category]!.total++;
      if (challenge.solved) {
        stats[category]!.solved++;
      }
    });
  
  return stats;
});

// 获取难度对应的类名和文本
const getDifficultyInfo = (difficulty: string) => {
  switch (difficulty) {
    case 'easy':
      return { class: 'difficulty-easy', text: '简单' };
    case 'medium':
      return { class: 'difficulty-medium', text: '中等' };
    case 'hard':
      return { class: 'difficulty-hard', text: '困难' };
    default:
      return { class: '', text: difficulty };
  }
};

// 获取分类的中文名称
const getCategoryName = (category: string) => {
  const names: Record<string, string> = {
    'all': '全部',
    'web': 'Web安全',
    'crypto': '密码学',
    'reverse': '逆向工程',
    'forensics': '取证分析'
  };
  return names[category] || category;
};

// 导入computed
import { computed } from 'vue';
</script>

<template>
  <div class="challenges-container">
    <h1>CTF挑战</h1>
    
    <!-- 分类筛选 -->
    <div class="categories">
      <button 
        v-for="category in ['all', 'web', 'crypto', 'reverse', 'forensics']" 
        :key="category"
        @click="activeCategory = category"
        :class="['category-btn', { active: activeCategory === category }]"
      >
        {{ getCategoryName(category) }} 
        <span class="category-count">{{ categoryStats[category]?.solved || 0 }}/{{ categoryStats[category]?.total || 0 }}</span>
      </button>
    </div>
    
    <!-- 挑战列表 -->
    <div class="challenges-grid">
      <div 
        v-for="challenge in filteredChallenges" 
        :key="challenge.id"
        :class="['challenge-card card', { 'challenge-solved': challenge.solved }]"
        @click="viewChallenge(challenge)"
      >
        <div class="challenge-header">
          <h3 class="challenge-title">{{ challenge.title }}</h3>
          <span :class="['difficulty', getDifficultyInfo(challenge.difficulty).class]">
            {{ getDifficultyInfo(challenge.difficulty).text }}
          </span>
        </div>
        <div class="challenge-info">
          <span class="category-tag">{{ getCategoryName(challenge.category) }}</span>
          <span class="points">{{ challenge.points }} 分</span>
        </div>
        <p class="challenge-desc">{{ challenge.description.substring(0, 100) }}...</p>
        <div class="challenge-status">
          <span v-if="challenge.solved" class="status-solved">✓ 已解决</span>
          <span v-else class="status-pending">挑战我</span>
        </div>
      </div>
    </div>
    
    <!-- 挑战详情模态框 -->
    <div v-if="selectedChallenge" class="modal-overlay" @click.self="closeChallenge">
      <div class="modal-content">
        <div class="modal-header">
          <h2>{{ selectedChallenge.title }}</h2>
          <button class="close-btn" @click="closeChallenge">×</button>
        </div>
        <div class="modal-body">
          <div class="challenge-meta">
            <span :class="['difficulty', getDifficultyInfo(selectedChallenge.difficulty).class]">
              {{ getDifficultyInfo(selectedChallenge.difficulty).text }}
            </span>
            <span class="category-tag">{{ getCategoryName(selectedChallenge.category) }}</span>
            <span class="points">{{ selectedChallenge.points }} 分</span>
          </div>
          
          <div class="challenge-description">
            <h3>题目描述</h3>
            <p>{{ selectedChallenge.description }}</p>
          </div>
          
          <div class="challenge-hint">
            <h3>提示</h3>
            <p>{{ selectedChallenge.hint }}</p>
          </div>
          
          <div class="flag-submit" v-if="!selectedChallenge.solved">
            <h3>提交Flag</h3>
            <div class="flag-form">
              <input 
                type="text" 
                v-model="flagInput" 
                placeholder="请输入Flag (格式: flag{...})" 
                class="flag-input"
              />
              <button @click="submitFlag" class="submit-btn">提交</button>
            </div>
            <p v-if="submitMessage" :class="['submit-message', { success: submitMessage.includes('恭喜') }]">
              {{ submitMessage }}
            </p>
          </div>
          
          <div v-else class="solved-message">
            <p class="challenge-solved">✓ 恭喜！你已经解决了这个挑战！</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.challenges-container {
  width: 100%;
}

/* 分类筛选 */
.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 2em;
}

.category-btn {
  padding: 0.5em 1em;
  background-color: var(--color-bg-dark);
  border: 1px solid rgba(243, 156, 18, 0.3);
  color: var(--color-primary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.category-btn:hover {
  background-color: rgba(243, 156, 18, 0.1);
  box-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
}

.category-btn.active {
  background-color: rgba(243, 156, 18, 0.2);
  border-color: var(--color-primary);
  box-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
}

.category-count {
  font-size: 0.9em;
  opacity: 0.8;
}

/* 挑战网格 */
.challenges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5em;
}

.challenge-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

.challenge-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(243, 156, 18, 0.3);
}

.challenge-card.challenge-solved {
  border-color: var(--color-success);
  background-color: rgba(46, 204, 113, 0.1);
}

.challenge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1em;
}

.challenge-title {
  margin: 0;
  font-size: 1.3em;
  flex: 1;
}

.difficulty {
  padding: 0.2em 0.6em;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
}

.difficulty-easy {
  background-color: rgba(46, 204, 113, 0.2);
  color: var(--color-success);
}

.difficulty-medium {
  background-color: rgba(243, 156, 18, 0.2);
  color: var(--color-primary);
}

.difficulty-hard {
  background-color: rgba(192, 57, 43, 0.2);
  color: var(--color-error);
}

.challenge-info {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 1em;
}

.category-tag {
  background-color: rgba(243, 156, 18, 0.1);
  color: var(--color-primary);
  padding: 0.2em 0.6em;
  border-radius: 4px;
  font-size: 0.8em;
}

.points {
  font-weight: bold;
  color: var(--color-warning);
  margin-left: auto;
}

.challenge-desc {
  color: var(--color-text-dark);
  margin-bottom: 1em;
}

.challenge-status {
  text-align: right;
}

.status-solved {
  color: var(--color-success);
  font-weight: bold;
}

.status-pending {
  color: var(--color-primary);
}

/* 模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.modal-content {
  background-color: var(--color-bg-dark);
  border: 1px solid rgba(243, 156, 18, 0.3);
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 0 30px rgba(243, 156, 18, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5em;
  border-bottom: 1px solid rgba(243, 156, 18, 0.2);
}

.modal-header h2 {
  margin: 0;
  color: var(--color-primary);
}

.close-btn {
  background: none;
  border: none;
  font-size: 2em;
  color: var(--color-primary);
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background-color: rgba(243, 156, 18, 0.1);
}

.modal-body {
  padding: 1.5em;
}

.challenge-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin-bottom: 2em;
}

.challenge-description,
.challenge-hint {
  margin-bottom: 2em;
}

.challenge-description h3,
.challenge-hint h3 {
  margin-bottom: 0.5em;
  color: var(--color-primary);
}

.flag-submit h3 {
  margin-bottom: 1em;
  color: var(--color-primary);
}

.flag-form {
  display: flex;
  gap: 10px;
  margin-bottom: 1em;
}

.flag-input {
  flex: 1;
  padding: 0.8em;
  background-color: var(--color-bg-dark);
  border: 1px solid rgba(243, 156, 18, 0.3);
  border-radius: 4px;
  color: var(--color-primary);
  font-family: 'JetBrains Mono', monospace;
}

.flag-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
}

.submit-btn {
  padding: 0.8em 1.5em;
  white-space: nowrap;
}

.submit-message {
  padding: 0.8em;
  border-radius: 4px;
  background-color: rgba(192, 57, 43, 0.2);
  color: var(--color-error);
}

.submit-message.success {
  background-color: rgba(46, 204, 113, 0.2);
  color: var(--color-success);
}

.solved-message {
  padding: 1em;
  border-radius: 4px;
  background-color: rgba(46, 204, 113, 0.2);
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .challenges-grid {
    grid-template-columns: 1fr;
  }
  
  .flag-form {
    flex-direction: column;
  }
  
  .submit-btn {
    width: 100%;
  }
}
</style>